package 
{
	import flare.animate.Transitioner;
	import flare.display.RectSprite;
	import flare.display.TextSprite;
	import flare.vis.controls.ClickControl;
	import flare.vis.controls.DragControl;
	import flare.vis.data.Data;
	import flare.vis.data.EdgeSprite;
	import flare.vis.data.NodeSprite;
	import flare.vis.data.Tree;
	import flare.vis.events.SelectionEvent;
	import flare.vis.operator.layout.ForceDirectedLayout;
	import flare.vis.operator.layout.Layout;
	import flare.vis.Visualization;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.Sprite;
	import flare.util.Orientation;
	import flash.events.Event;
	import flash.geom.Rectangle;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	import flash.system.LoaderContext;
	import flash.text.StyleSheet;
	import flash.text.TextFieldAutoSize;
	import flash.text.AntiAliasType;
	
	
	/**
	 * Simple demo showing how to set up a node as a composition of
	 * + an image (Loader)
	 * + a html text (TextSprite)
	 * + a rectangular shape with rounded corner (RectSprite)
	 * 
	 * @author <a href="http://goosebumps4all.net">martin dudek</a>
	 */
	
	[SWF(width="600", height="600", backgroundColor="#ffff00", frameRate="30")]
	public class NodeCompositionDemo extends Sprite
	{
		private var img:Array = ["img0.gif", "img1.jpg", "img2.gif"];
		private var title:Array = ["PAP", "FLAP", "G4A"];
		private var text:Array = ["what would the prefuse assistance pool be without Bjoerns juicy demo source code", "the crappy flare assistance pool", "what is that domain name for?"];
		private var url:Array = ["goosebumps4all.net/34all/bb/forumdisplay.php?fid=18","goosebumps4all.net/34all/bb/forumdisplay.php?fid=28","goosebumps4all.net"];
		
		public function NodeCompositionDemo() {
			
			var w:Number = stage.stageWidth;
			var h:Number = stage.stageHeight;
			
			var data:Data = new Data();
			
			data.nodes.setDefaults( { 
				"x" : w / 2,
				"y": h / 2,
				"shape" : null,
				"mouseChildren" : false,
				"buttonMode" : true,
				"cacheAsBitmap" : true,        // comment this line and see the difference
				"alpha" : 0
			});
			
			data.edges.setDefaults( {
				"lineWidth" : 4,
				"alpha" : 0
			});
			
			
			
			
			for (var i:uint = 0; i < img.length; i++) {
				var ns:NodeSprite = data.addNode();
				
				ns.data.url = url[i];
				
				ns.props.rect = getRectSprite();
				ns.props.text = getTextSprite(title[i],text[i],url[i]);
				ns.props.loader = getLoader();
				ns.props.image = img[i];
				
				data.nodes[i].addChild(ns.props.rect);
				data.nodes[i].addChild(ns.props.loader);
				data.nodes[i].addChild(ns.props.text);
				
				
			}
			
			for (i = 0; i < img.length; i++) {
				for (var j:uint = 0; j < img.length; j++) {
					data.addEdgeFor(data.nodes[i], data.nodes[j]);
				}
			}
			
			var vis:Visualization = new Visualization(data);
			
			vis.bounds = new Rectangle(80, 80, w - 160, h - 160);
			
			var dc:DragControl = new DragControl(NodeSprite);
			vis.controls.add(dc);
			
			var cc2:ClickControl = new ClickControl(NodeSprite, 2, onDoubleClick);
			vis.controls.add(cc2);
			
			var fdl:ForceDirectedLayout = new ForceDirectedLayout(true);
			fdl.defaultSpringLength = 266;
			vis.operators.add(fdl);
			
			vis.continuousUpdates = true;
			
			addChild(vis);
			
			vis.data.nodes.visit(function(ns:NodeSprite):void {
				loadImage(ns);
			});
			
		
		}
		
		private function loadImage(ns:NodeSprite):void {
			ns.props.loader.load(new URLRequest(ns.props.image));
		}
		
		
		
		private function getLoader():Loader {
			var lo:Loader = new Loader();
			lo.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
			return lo;
		}
		
		
		
		private function getTextSprite(title:String, text:String, url:String):TextSprite {
			
			var css:StyleSheet = getCSS();
			var ts:TextSprite = getCustomizedTextSprite(css);
			ts.htmlText = getHtmlText(title, text);
			
			return ts;
		}
		
		private function getRectSprite():RectSprite {
			var rs:RectSprite = new RectSprite(0,0,100,100,20,20);
			rs.fillColor = 0xffff0044;
			rs.lineColor = 0xff0000ff;
			rs.lineWidth = 4;
			
			return rs;
		}
		
		private function onComplete(evt:Event):void {
			var li:LoaderInfo =  evt.target as LoaderInfo;
			var ns:NodeSprite = li.loader.parent as NodeSprite;
			
			var loader:Loader   = ns.props.loader as Loader;
			var text:TextSprite = ns.props.text as TextSprite;
			var rect:RectSprite = ns.props.rect as RectSprite;
			
			text.textField.width = li.width ;
			text.dirty();
			
			var height:Number = text.height + li.height;
			
			text.y = - height / 2 + li.height;
			
			loader.x = - (li.width+1) / 2;
			loader.y = - (height) / 2;
			
			rect.width = li.width + 40;
			rect.height = height + 40;
		
			rect.x = - li.width / 2 - 18;
			rect.y = - height / 2 -18;
			
			
			
			var t:Transitioner = new Transitioner(4);
			t.$(ns).alpha = 1;
			
			var es:EdgeSprite;
			ns.visitEdges(function(es:EdgeSprite):void {
				if ((es.target != ns && es.target.parent.alpha > 0) || (es.source != ns && es.source.parent.alpha > 0)) {
					t.$(es).alpha = 1;
				}
			});
			
			t.play();
		}
		
		
		
		private function getCustomizedTextSprite(css:StyleSheet):TextSprite {
			
			  var ts:TextSprite = new TextSprite();
			
			  ts.textField.x = 0;
			  ts.textField.y = 0;
			 
			  ts.textField.styleSheet = css;  
			  
			  ts.textField.autoSize = TextFieldAutoSize.CENTER;  
              ts.textField.multiline = true;  
              ts.textField.antiAliasType = AntiAliasType.ADVANCED;
			  
			  ts.textField.background = true;
			  ts.textField.backgroundColor = 0xffffaa;

			
             ts.textField.wordWrap = true;

			 ts.horizontalAnchor = TextSprite.CENTER;
			 
			 
			  return ts;
			
		}
		
		
		private function getHtmlText(title:String,text:String):String {
			
			var htmlText:String = "<body>";  
		
            htmlText += "<span class=\"title\">" + title + "</span>";
  			htmlText += "<br><span class=\"text\">" + text + "</span>";
     		
			htmlText+= "</body>";
		
			return htmlText;
			
		}
		
		

		
		
		private function getCSS():StyleSheet {
			var css:StyleSheet = new StyleSheet();  
    
              // create the styles  
              var body:Object = new Object();  
              body.fontFamily = "arial";  
			  
              var title:Object = new Object();  
              title.fontSize = 16;  
              title.fontFamily = "arial";  
              title.fontWeight = "bold";  
              title.color = "#FF0000";  
            
              
              var text:Object = new Object();  
              text.fontSize = 12;  
              text.fontFamily = "sanserif";  
              text.color = "#000022";  
          
   
              // set the styles  
              css.setStyle("body", body);  
              css.setStyle(".title", title);
              css.setStyle(".text", text);  
   
			  return css;
    
		}
		
		private function onDoubleClick(evt:SelectionEvent):void {
			var ns:NodeSprite = evt.node;
			var url:String = ns.data.url;
			var urequest:URLRequest = new URLRequest("http://" + ns.data.url);
			
			navigateToURL(urequest, '_blank'); // second argument is target
		}
		

	
	}
}

